import { useEffect, useRef,useState } from 'react'
import style from './index.less'
import photo from './78.jpg'
const QiPaoKuang: React.FC = () => {


  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [context,setContext] = useState<CanvasRenderingContext2D | null>(null)
  useEffect(() => {
    if(canvasRef.current){
      const ctx = canvasRef.current.getContext('2d')!
      canvasRef.current.width = 1500
      canvasRef.current.height = 10000
      setContext(ctx)
      ctx.beginPath()
      ctx.moveTo(300,400)
      ctx.quadraticCurveTo(250,300,300,200)
      ctx.quadraticCurveTo(425,140,550,200)
      ctx.quadraticCurveTo(600,300,550,400)
      ctx.quadraticCurveTo(520,425,450,420)
      ctx.quadraticCurveTo(450,470,400,500)
      ctx.quadraticCurveTo(400,440,425,420)
      ctx.quadraticCurveTo(390,445,300,400)
      ctx.stroke()
      ctx.fillStyle = "blue"
      ctx.moveTo(0,550)
      ctx.lineTo(1000,550)
      ctx.stroke()

      ctx.fillText('三次贝塞尔曲线',600,600)
      ctx.beginPath()
      ctx.strokeStyle="orange"
      ctx.moveTo(700,700)
      ctx.bezierCurveTo(780,640,760,760,700,800)
      // ctx.bezierCurveTo()
      ctx.moveTo(700,700)
      ctx.bezierCurveTo(620,640,640,760,700,800)
      ctx.stroke()
      ctx.fillStyle="orange"
      ctx.fill()
      // 角度，放射中心

      ctx.beginPath()
       const conicGradient = ctx.createConicGradient(0,100,100)
       conicGradient.addColorStop(0,'pink')
       conicGradient.addColorStop(0.5,'orange')
       conicGradient.addColorStop(1,'skyblue')
       ctx.fillStyle = conicGradient
      //  ctx.fillRect(0,0,600,400)
      ctx.arc(100,100,100,0,Math.PI*2)
      // ctx.fill(conicGradient)
      ctx.fill()

      // pattern印章模式
      const img = new Image()
      img.src = photo

      img.onload = ()=>{
        console.log('加载成功')
        const pattern = ctx.createPattern(img,'repeat')!
        ctx.fillStyle = pattern
        ctx.fillRect(0,700,1350,2000)
      }
    }
  },[canvasRef])
  return <div className={style.qiPaoWrapper}>
    <div>贝塞尔二次曲线 quadraticCurveTo(x1,y1,x2,y2) 起点是路径最新的点,(x1,y1)是控制点，(x2,y2)是终点</div>
    <canvas ref={canvasRef}></canvas>
  </div>
}

export default QiPaoKuang

